<template>
  <div class="container">
    <div class="left">
      <div >
        <el-card class="card_style" style="margin-top: 0">
          <div >
            <span>接口日志使用占比</span>
            <div id="main" :style="{width: '100%', height: '300px'}" ></div>
          </div>
        </el-card>

        <el-card class="card_style">
          <div >
            <span>商城信息统计</span>
            <p style="font-size: 15px;font-family: 宋体;color: #409EFF; font-weight: bold">
              从注册至今{{this.shopMes.days}}天，
              您购买了{{this.shopMes.total}}件商品，
              一共消费了{{this.shopMes.pay}}元。
              没有消费的日子，都在很认真的生活呢！
            </p>
<!--            <el-button @click="this.shopShow = !this.shopShow">查看消费情况</el-button>-->
            <div id="ShopMes" style=" width: auto;height: 400px" ></div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="middle">
      <el-button type="primary" style="margin-left: 5px" @click="this.bodyShow = !this.bodyShow">展示/隐藏</el-button>
      <div class="body_style" v-show="this.bodyShow">
        <p class="p_style_title">提升空间</p>
        <p class="p_style_body1">基于spring cloud 2021.0.1版本，springboot版本 2.6.6，spring-cloud-alibaba2021.0.1.0</p>
        <p class="p_style_body1"> 此项目采用分布式架构搭建、设计到的技术有：</p>
        <p class="p_style_body"> 1. spring security+oauth2.0+jwt实现单点登录</p>
        <p class="p_style_body"> 2. nacos统一管理服务以及配置文件</p>
        <p class="p_style_body"> 3. openfeign基于nacos注册的服务实现服务之间的通信</p>
        <p class="p_style_body"> 4. rabbitMQ消息中间件</p>
        <p class="p_style_body">  5. redis缓存中间件</p>
        <p class="p_style_body">  6. 阿里云SSO云存储</p>
        <p class="p_style_body"> 7. MySQL持久化数据 </p>

        <p class="p_style_body1">特色功能：</p>
        <p class="p_style_body">0.角色权限菜单化、客户自己控制</p>
        <p class="p_style_body">1.基于注解方式，按照约束写控制层接口，可实现全局接口日志查询，并且给出图表展示</p>
        <p class="p_style_body">2.基于注解方式，实现接口幂等性控制，防止重复提交请求产生问题（商品管理模块中的购买模块添加了注解）</p>
        <p class="p_style_body">3.模拟订单下单之后，客户未支付，界面实时显示支付倒计时</p>
        <p class="p_style_body">4.订单超过时间未支付（我设置的是一分半），rabbitMQ死信队列会监听订单，超时后自动删除订单</p>
        <p class="p_style_body">5.excel导出、word通过模板导出</p>
        <p class="p_style_body">6.redis分布式锁控制请求都走redis，防止过多请求访问DB造成宕机</p>
      </div>
    </div>
    <div class="right">
      <div >
        <el-card >
          <div >
            <span>错误接口日志使用占比</span>
            <div id="errorEcharts" :style="{width: '100%', height: '300px'}" ></div>
          </div>

        </el-card>

      </div>
    </div>
  </div>



</template>

<script>
import * as echarts from 'echarts';
import homePage from "@/api/homePage"
export default {
  name: "Home",
  data() {
    return {
      logCount:[],
      shopMes:{
        days: null,
        total: null,
        pay: null
      },
      bodyShow: false,
      shopShow: false,
    }
  },
  mounted() {
    this.getLogCount();
    this.getErrorLogCount();
    this.getCountShopMes();
  },
  methods: {

    /**
     * 接口正常日志
     * @returns {Promise<void>}
     */
    async getLogCount(){
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;

    await  homePage.getList().then((res)=>{
        this.logCount = res.data
        console.log(this.logCount,"echarts--datalist")
      })

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:  this.logCount
          }
        ]
      };

      option && myChart.setOption(option);
    },

    /**
     * 接口异常日志
     * @returns {Promise<void>}
     */
    async getErrorLogCount(){

      let name =[];
      let values = [];
      await homePage.getErrorList().then((res)=>{
             res.data.forEach(item =>{
               name.push(item.name)
               values.push(item.value)
             })
      })

      let chartDom = document.getElementById('errorEcharts');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: name,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: values
          }
        ]
      };

      option && myChart.setOption(option);
    },


    /**
     * 商城信息统计
     * @returns {Promise<void>}
     */
    async getCountShopMes(){
     const res = await homePage.countShopMes();
     let data = res.data;
      let name =[];
      let values = [];
     let {days,total,pay,shopList } =data;
     this.shopMes.days = days;
     this.shopMes.total =total;
     this.shopMes.pay = pay;
     shopList.forEach(item =>{
       name.push(item.name)
       values.push(item.value)
     })
      let chartDom = document.getElementById('ShopMes');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        grid: {
          left: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: name
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: values,
            type: 'line',
            smooth: true
          }
        ]
      };

      option && myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
.card-body{
  width: 1470px;
  height: 880px;
}
.logCount-style{
  width: 390px;
  height: 390px;
  border-color: red;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  height: 100vh;
}
.card_style{
  margin-top: 2%;
}
.card_style,
.left,
.middle,
.right {
  height: 100%;
  border: none;
  border-right: 5px solid #ffffff;
  border-radius: 20px;
  box-shadow: 1px 1px 2px 2px #888888;
}
.left {
  width: 25%;
  border-right: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.middle {
  margin-left: 5px;
  margin-right: 5px;
  width: 50%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 2px 2px 2px #4e4e4e, -2px 2px 2px #424242;
}
.right {
  width: 25%;
  border-left: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.body_style{
  margin: 5px 1px 1px 5px;
  width: auto;
  height: auto;
  border: red;
  border-radius: 50px;
  box-shadow: 1px 1px 10px 5px #888888;
}
.p_style_body1,
.p_style_body,
.p_style_title{
  font-weight: bold;
}
.p_style_body1{
  margin-left: 3%;
  font-family: 黑体;
  font-size: 23px;
  color: #904040;
}
.p_style_body{
  margin-left: 5%;
  font-family: 黑体;
  font-size: 20px;
}
.p_style_title{
  text-align: center;
  font-size: 40px;
  font-family: 宋体;
}
</style>
